<template>
  <div class="home-wrap">
    <div class="carousel-wrap">
      <a-carousel autoplay>
        <a @click="carouselClick(carousel.url)" v-for="carousel in carouselList" :key="carousel.id">
          <img :src="carousel.cover" alt="" />
        </a>
      </a-carousel>
    </div>
    <div class="course-type-wrap">
      <div class="w1200 course-type-content">
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { Carousel } from "ant-design-vue";
import { fetchHomeCarousel } from "@/services/index";
import Footer from "@/components/layout/Footer";
import {openBrowser} from '@/utils/tools'
export default {
  components: {
    ACarousel: Carousel,
    Footer
  },
  data() {
    return {
      carouselList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    carouselClick(url) {
      if (url) {
        openBrowser(url)
      }
    }
  },
  created() {
    fetchHomeCarousel().then(res => {
      if (res.code === 1) {
        this.carouselList = res.data;
      }
    });
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类

.home-wrap {
  min-width: 1200px;
}
.carousel-wrap {
  width: 100%;
  a {
    display: block !important;
  }
  img {
    display: block;
    width: 100%;
  }
}
.ant-carousel /deep/ .slick-slide {
  text-align: center;
  overflow: hidden;
}

.ant-carousel /deep/ .slick-slide h3 {
  color: #fff;
}

/*.course-type-wrap {*/
/*  height: 800px;*/
/*  overflow: hidden;*/
/*  background-image: url("~assets/home/home-bg.png");*/
/*  background-size: auto 100%;*/
/*  background-position: center;*/
/*  background-repeat: no-repeat;*/
/*}*/

/*.course-type-content {*/
/*  display: flex;*/
/*  margin-top: 50px;*/
/*  margin-bottom: 50px;*/
/*  justify-content: space-between;*/
/*  flex-wrap: wrap;*/
/*  .type-item {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    width: 370px;*/
/*    height: 140px;*/
/*    font-size: 40px;*/
/*    color: #000;*/
/*    margin-bottom: 45px;*/
/*    border: 1px solid #d9d9d9;*/
/*    border-radius: 12px; !* no *!*/
/*    & > img {*/
/*      width: 80px;*/
/*      height: 75px;*/
/*      margin-right: 35px;*/
/*    }*/
/*  }*/
/*}*/
</style>
